<template>
	<view>
		<view class="mp-header">
			<!-- #ifdef MP -->
			<view class="sys-head" view :style="{ height: statusBarHeight }"></view>
			<!-- #endif -->
			<view class="navbar">
				<text class="iconfont icon-xiangzuo" @click="navback"></text>
				<text class="title">代理商提现</text>
			</view>
			<view class="yue">
				<text class="tit">代理商余额</text>
				<view class="money">
					<text style="font-size: 44rpx;">￥</text><text>{{ balance }}</text>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card_header">
				<text>提现金额</text>
				<text @click="all">全部提现</text>
			</view>
			<view class="num_area">
				<view class="money">
					<text>￥</text>
					<input type="text" :value="inputVal" @input="input" />
				</view>
				<text class="placeholder">输入提现金额</text>
			</view>
			<view class="txt">提现到 我的余额</view>
		</view>
		<view class="btn" @click="submit">提现</view>
	</view>
</template>

<script>
	import { agencyBalance } from '@/api/user.js'
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				statusBarHeight: statusBarHeight,
				balance: '',
				inputVal: '0.00'
			};
		},
		onLoad(options) {
			this.balance = options.money
		},
		methods: {
			navback() {
				uni.navigateBack({
					delta: 1
				})
			},
			all () {
				this.inputVal = this.balance
			},
			input(e) {
				const { value } = e.detail
				this.inputVal = value
			},
			submit () {
				if(Number(this.inputVal) > Number(this.balance)) return uni.showToast({
					title: '提现金额不能大于余额',
					icon: 'none'
				})
				let arr = ['0', '0.0', '0.00', '0.000', '0.0000']
				if(arr.indexOf(this.inputVal) > -1) return uni.showToast({
					title: '提现金额不能为0',
					icon: 'none'
				})
				agencyBalance({ money: this.inputVal }).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.mp-header {
	width: 100%;
	background-image: linear-gradient(45deg, #b6359c, #ef0a6a);
	.navbar {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		padding: 0 20rpx;
		.iconfont {
			margin-right: 20rpx;
		}
		.title {
			width: 55%;
			text-align: right;
		}
	}
	.yue {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 220rpx;
		color: #fff;
		padding-top: 30rpx;
		.money {
			font-size: 60rpx;
		}
	}
}
.card {
	width: 92%;
	// height: 400rpx;
	background-color: #fff;
	margin: -30rpx auto 0;
	border-radius: 10rpx;
	padding: 40rpx;
	.card_header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		text:last-child {
			color: #ef0a6a;
		}
	}
	.num_area {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #ccc;
		.money {
			flex: 1;
			display: flex;
			align-items: center;
			font-size: 50rpx;
			input {
				font-size: 50rpx;
				height: 100%;
			}
		}
		.placeholder {
			color: #999;
		}
	}
	.txt {
		margin-top: 30rpx;
	}
	
}
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	height: 100rpx;
	background-image: linear-gradient(45deg, #b6359c, #ef0a6a);
	border-radius: 50rpx;
	color: #fff;
	font-size: 30rpx;
	margin: 50rpx auto 0;
}
</style>
